<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加菜单</title>
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/font-awesome/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="${request.contextPath}/plugins/select2/select2.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/animate.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/style.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/common.css">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-md-12">
				<div class="ibox">
					<div class="ibox-content">
						<div class="tabs-container">
							<ul class="nav nav-tabs" id="select-tabs">
								<li class="active" data-formId ="addDirForm">
									<a data-toggle="tab" href="#tab-1" aria-expanded="true">添加目录</a>
								</li>
								<li data-formId ="addMenuForm">
									<a data-toggle="tab" href="#tab-2" aria-expanded="false">添加菜单</a>
								</li>
								<li data-formId ="addActionForm">
									<a data-toggle="tab" href="#tab-3" aria-expanded="false">添加功能</a>
								</li>
							</ul>
							<div class="tab-content">
								<div id="tab-1" class="tab-pane active">
									<div class="panel-body">
										<form class="form-horizontal m-t" id="addDirForm" data-url="${request.contextPath}/system/sysmenu/doAddDir">
											<div class="form-group">
												<label class="col-sm-2 control-label">目录名称：</label>
												<div class="col-sm-9">
													<input type="text" name="menuName" class="form-control" placeholder="请输入目录名称" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">目录图标：</label>
												<div class="col-sm-9">
													<span class="form-control">当前图标为：<i id="dirIcon" class="fa fa-folder-open"></i>
														<a href="javascript:void(0);" onclick="selectIcon(1)" class="pull-right">
															 点击选取图标
														</a>
													</span>
													<input type="hidden" class="form-control" name="icon" id="folderIcon" value="fa fa-folder-open">
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">目录排序：</label>
												<div class="col-sm-9">
													<input type="text" name="sort" class="form-control" placeholder="请输入目录排序" required>
												</div>
											</div>
										</form>
									</div>
								</div>
								<div id="tab-2" class="tab-pane">
									<div class="panel-body">
										<form class="form-horizontal m-t" id="addMenuForm" data-url="${request.contextPath}/system/sysmenu/doAddMenu">
											<div class="form-group">
												<label class="col-sm-2 control-label">父级菜单：</label>
												<div class="col-sm-9">
													<select name="pid" class="form-control select2" style="width: 100%;" required>
														<#list list as m>
															<option value="${(m.id)!}">${(m.menuName)!}</option>
														</#list>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">菜单名称：</label>
												<div class="col-sm-9">
													<input type="text" name="menuName" class="form-control" placeholder="请输入菜单名称" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">菜单URL：</label>
												<div class="col-sm-9">
													<input type="text" name="url" class="form-control" placeholder="请输入菜单URL" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">菜单图标：</label>
												<div class="col-sm-9">
													<span class="form-control">当前图标为：<i id="menuIcon" class="fa fa-file"></i>
														<a href="javascript:void(0);" onclick="selectIcon(2)" class="pull-right">
															 点击选取图标
														</a>
													</span>
													<input type="hidden" class="form-control" name="icon" id="fileIcon" value="fa fa-file">
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">目录排序：</label>
												<div class="col-sm-9">
													<input type="text" name="sort" class="form-control" placeholder="请输入目录排序" required>
												</div>
											</div>
										</form>
									</div>
								</div>
								<div id="tab-3" class="tab-pane">
									<div class="panel-body">
										<form class="form-horizontal m-t" id="addActionForm" data-url="${request.contextPath}/system/sysmenu/doAddAction">
											<div class="form-group">
												<label class="col-sm-2 control-label">顶级目录：</label>
												<div class="col-sm-9">
													<select id="dir" class="form-control select2" style="width: 100%;" required>
														<option value="" selected="selected">--请选择--</option>
														<#list list as m>
														<option value="${(m.id)!}">${(m.menuName)!}</option>
														</#list>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">父级菜单：</label>
												<div class="col-sm-9">
													<select id="pid" name="pid" class="form-control select2" style="width: 100%;" required>
														<option value="" selected="selected">--请选择--</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">功能名称：</label>
												<div class="col-sm-9">
													<input type="text" name="menuName" class="form-control" placeholder="请输入功能名称" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">权限标识：</label>
												<div class="col-sm-9">
													<input type="text" name="permissions" class="form-control" placeholder="请输入权限标识" required>
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-2 control-label">功能排序：</label>
												<div class="col-sm-9">
													<input type="text" name="sort" class="form-control" placeholder="请输入功能排序" required>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 通用js引入 -->
	<script src="${request.contextPath}/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script src="${request.contextPath}/plugins/layer/layer.min.js"></script>
	<script src="${request.contextPath}/plugins/laydate/laydate.js"></script>
	<script src="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/jquery.validate.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/messages_zh.min.js"></script>
	<script src="${request.contextPath}/plugins/blockUI/jquery.blockUI.js"></script>
	<script src="${request.contextPath}/hadmin/js/content.js"></script>
	<script src="${request.contextPath}/hadmin/js/common.js?v=0.9"></script>
	<script>
		$("#dir").on('change',function(){
			var pid = $(this).val();
			$.post('${request.contextPath}/system/sysmenu/listMenuByPid?d=' + new Date().getTime(),
				{pid:pid},
				function(response){
					if(response.code == 200){
						$("#pid").empty();
						$("#pid").select2({
							data:response.data
						});
						$("#pid").valid();
					}
				}
			);
		})

		$("#pid").change(function(){
			$(this).valid();
		});

		function selectIcon(type){
			var layerIndex = parent.layer.getFrameIndex(window.name);
			parent.layer.open({
				type : 2,
				title : '选取图标',
				closeBtn : 1,
				anim: -1,
				isOutAnim: false,
				shadeClose : true,
				shade : 0.3,
				area : ['90%', '90%'],
				content : '${request.contextPath}/system/sysmenu/icon',
				btn : [ '确定', '关闭' ],
				yes : function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index,layero);
				},
				success: function(layero, index){
					var body = parent.layer.getChildFrame('body', index);
					body.find("#sid").attr("iconType", type + "," + layerIndex);
				}
			});
		}

		function submitHandler() {
			var fromId = $("#select-tabs").find(".active").attr("data-formId");
			var formObject = $("#"+fromId);
			if (formObject.validate().form()) {
				saveInfo(formObject.attr('data-url'), formObject.serialize());
			}
		}
	</script>
</body>
</html>
